<template>
  <div class="app-container">
    <!--<h4 style="text-align: left;">新增文章信息</h4>-->
    <el-form label-width="120px">

      <el-form-item label="文章标题">
        <el-input v-model="article.title"/>
      </el-form-item>

      <!-- 文章图片 -->
      <el-form-item label="文章图片">
        <el-upload
          title="file"
          class="avatar-uploader"
          action="http://localhost:8080/upload/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="article.image" :src="'http://rj0158yod.hd-bkt.clouddn.com/' + article.image" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="文章分类">
        <el-select v-model="article.classify" clearable placeholder="请选择">
          <el-option value="0" label="健康头条"/>
          <el-option value="1" label="慢病护理"/>
        </el-select>
      </el-form-item>

      <el-form-item label="文章内容">
        <el-input v-model="article.description" :rows="10" type="textarea"/>
      </el-form-item>

      <el-form-item label="发布时间">
        <el-date-picker
          v-model="article.createTime"
          type="date"
          placeholder="发布时间"
          value-format="yyyy-MM-dd HH:mm:ss"
          default-time="00:00:00">
        </el-date-picker>
      </el-form-item>

      <el-form-item label="排序号">
        <el-input-number v-model="article.sort" controls-position="right"/>
      </el-form-item>

      <el-form-item label="发布人ID">
        <el-input v-model="article.doctorId"/>
      </el-form-item>

      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="handleAddOrEdit">保存</el-button>
        <el-button @click="back">取 消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import article from "../../../api/article";

  export default {
    data() {
      return {
        article: {              //表单数据的绑定模型
          image: ""
        },
        saveBtnDisabled: false, //防止表单重复提交
      }
    },
    created(){
      // 获取路由地址里面的参数
      console.log(this.$route);
      if(this.$route.params && this.$route.params.id){
        // 表示: 路由参数里面有值，并且有id这个值，就是进行修改操作
        console.log("进行修改操作")
        // 需要通过培训师的id去查询培训师的数据
        this.queryById(this.$route.params.id);
      } else {
        //查询章节排序最大值
        article.getMaxSortByCourseId().then(res => {
          console.log("查询的最大排序为: "+ res.data);
          this.article.sort = res.data + 1;
        });
      }
    },
    methods: {
      // 根据ID查询文章
      queryById(id){
        article.queryById(id).then(res => {
          this.article = res.data;
        });
      },
      //点击添加按钮
      handleAddOrEdit(){

        // 把saveBtnDisabled 改为true  表示这按钮不可以被点击
        this.saveBtnDisabled = true;

        if(this.$route.params && this.$route.params.id){
          // 修改操作
          article.edit(this.article).then(res => {
            // 弹出提示信息
            this.$message.success(res.message);
            // 添加完成，需要跳转到列表页面
            this.$router.push({ path: '/system/list' })
          });
        }else{
          // 增加操作
          //调用新增方法
          article.add(this.article).then(res => {
            // 弹出提示信息
            this.$message.success(res.message);
            // 添加完成，需要跳转到列表页面
            this.$router.push({ path: '/system/list' })
          });
        }

        this.saveBtnDisabled = false;

      },
      back(){
        this.$router.push({ path: '/system/list' });
      },

      /**
       * 图片上传成功之后回调该函数
       * @param res   响应回来的数据,通过该对象可以获得响应数据
       * @param file  上传的图片file
       */
      handleAvatarSuccess(res, file) {
        console.log("上传图片响应回来的数据为:" + res.data);
        //this.article.image = "http://rj0158yod.hd-bkt.clouddn.com/" + res;
        console.log("this.article.image = " + this.article.image);
        this.article.image = res.data;
      },

      /**
       * 图片上传之前触发该函数，一般用于图片的大小，后缀等信息的校验
       * @param file    上传的图片file
       * @returns {boolean}
       */
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传图片图片只能是 JPG 或 png 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

    }
  }
</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

